<template>
    <div class="MsaPatternContainers">
        <!-- 设置图片路径 -->
        <!-- <img ref="image" :src="imageUrl" @load="getImageSize"> -->
        <canvas ref="canvas0" style="display: none;"></canvas>
        <canvas ref="canvas1" style="display: none;"></canvas>
        <canvas ref="canvas2" style="display: none;"></canvas>
        <div v-for="(item, index) in canvasImg" :key="index" class="MsaPatternContainers_item">
            <img :src="item" alt="" class="MsaPatternContainers_item_img">
            <div class="MsaPatternContainers_item_text" v-if="isShowScore">
                Ai mMASI评分{{ (imgListArr[index].scoreAi).toFixed(1) }}分
            </div>
        </div>

    </div>
</template>

<script>

export default {
    props: {
        imgListArr: {
            type: Array,
            default: []
        },
        isShowScore:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            scale: 0.2,
            canvasImg: [],

        }
    },
    computed: {

    },
    mounted() {
        console.log(this.imgListArr)
        let that = this
        that.canvasImg = []
        this.imgListArr.forEach((it, mindex) => {
            this.getImgSize(it.photoAddress, it.points, mindex)
        })

    },
    methods: {
        getImgSize(url, points, mindex) {
            let that = this
            let imgpoints = points
            let img = new Image();//document.createElement("img");
            img.src = url;
            img.crossOrigin = "anonymous"; //关键
            img.onload = function () {
                let canvasImg = document.createElement("canvas");
                let context = canvasImg.getContext("2d");
                canvasImg.width = img.width;
                canvasImg.height = img.height;
                context.drawImage(img, 0, 0);
                let width = canvasImg.width * that.scale;
                let height = canvasImg.height * that.scale;
                console.log("图片宽度：" + width);
                console.log("图片高度：" + height);
                that.drawImgSingle(img, width, height, imgpoints, mindex)
            };
        },

        async drawImgSingle(img, width, height, imgpoints, index) {
            let _this = this
            let canvas = this.$refs.canvas0
            if (index == 0) {
                canvas = this.$refs.canvas0
            } else if (index == 1) {
                canvas = this.$refs.canvas1
            } else if (index == 2) {
                canvas = this.$refs.canvas2
            }
            const context = canvas.getContext('2d');
            console.log(context)
            canvas.width = width
            canvas.height = height
            context.width = width
            context.height = height
            context.drawImage(img, 0, 0, width, height);
            context.strokeStyle = '#ff0000'; // 红色线条
            context.lineWidth = 3; // 线条宽度
            // context.setStrokeStyle("#ff0000")
            // context.setLineWidth(3)
            if (imgpoints) {
                imgpoints.forEach((t) => {
                    t.points.forEach((m, n) => {
                        if (n == 0) {
                            context.moveTo(m.x * _this.scale,
                                m.y * _this.scale)
                        } else {
                            context.lineTo(m.x * _this.scale,
                                m.y * _this.scale)
                        }
                    })
                    context.closePath();
                })
                context.stroke()
            }
            const dataURL = canvas.toDataURL('image/png');
            let imageUrl = dataURL;
            this.canvasImg.push(imageUrl)
            //  console.log(imageUrl)
            // context.draw(true, () => { // 把以上内容画到 canvas 中
            //     setTimeout(() => {

            //     }, 500)
            // })


        },
    }
}
</script>

<style lang="scss" scoped>
.MsaPatternContainers {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &_item {
        width: 32%;

        &_img {
            width: 100%;
            height: 100%;

        }

        &_text {
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            color: rgb(24, 144, 255);
        }
    }
}

@media screen and (max-width:550px) {
    .MsaPatternContainers {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &_item {
            width: 32%;

            &_img {
                width: 100%;
                height: 100%;

            }

            &_text {
                font-size: 12px;
                font-weight: 600;
                text-align: center;
                color: rgb(24, 144, 255);
            }
        }
    }



}

@media screen and (max-width:390px) {}
</style>
